<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>粉丝管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script type="text/javascript" src="echarts.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>粉丝管理</legend>
</fieldset>

<div class="layui-body" style="left: 13px;margin-top: 68px;">
    <!-- 内容主体区域 -->
    <table class="layui-hide" id="test" lay-filter="demo"></table>
    <div id="chartmain" style="width:600px; height: 400px;"></div>
    <div id="manwan" style="width:600px; height: 400px;float: right;margin-top: -398px;;"></div>
</div>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('manwan'));
    $.get('/echars.do').done(function (data) {
        var d1, d2;
        var parse = JSON.parse(data);
        d1 = parse['man'][0];
        d2 = parse['woman'][0];
        myChart1.setOption({
            title: {
                text: '粉丝男女比例'
            },
            series: [
                {
                    name: '男女比例',
                    type: 'pie',
                    radius: '55%',
                    data: [
                        {value: d1, name: '男粉丝'},
                        {value: d2 , name: '女粉丝'}
                    ]
                }
            ]
        });
    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取关</a>
</script>
<script src="layui/layui.all.js"></script>
<script src="jquery-1.9.1.js"></script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('chartmain'));
    !function echar() {
        $.get('/echars.do').done(function (data) {
            var d1, d2, d3, d4,d5;
            var parse = JSON.parse(data);
            d1 = parse['xian'][0];
            d2 = parse['shanghai'][0];
            d3 = parse['beijing'][0];
            d4 = parse['shengzheng'][0];
            d5 = parse['others'][0];
            myChart.setOption({
                title: {
                    text: '粉丝人数在不同城市的分布情况'
                },
                tooltip: {},
                legend: {
                    data:['人数']
                },
                xAxis: {
                    data: ["西安", "上海", "深圳", "北京","其他地区"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [d1,d2,d3,d4,d5-d1-d2-d3-d4]
                }]
            });
        });
    }();



</script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });

    layui.config({
        version: '1531663423583' //为了更新 js 缓存，可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element; //元素操作

        //执行一个 table 实例
        table.render({
            elem: '#test'
            , height: 500
            , url: '/user.do' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'uid', title: 'ID', width: 100, sort: true, fixed: 'left'}
                , {field: 'uname', title: '用户名', width: 100}
                , {field: 'sex', title: '性别', width: 150, sort: true}
                , {field: 'city', title: '城市', width: 150, sort: true}
                , {field: 'signature', title: '签名', width: 250}
                , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
        });
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('你的粉丝');
            } else if (layEvent === 'del') {
                layer.confirm('确认取关?', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令   ajax,json
                    var str = JSON.parse(JSON.stringify(data));
                    var uid = str["uid"];
                    console.log(uid);
                    $.ajax({
                        type: "get",
                        url: "/delete.do?uid=" + uid,
                    }).done(function () {

                    }).fail();
                });
            } else if (layEvent === 'edit') {
                layer.confirm('编辑粉丝信息');
                //ajax

            }
        });

        //上传
        upload.render({
            elem: ''
            , url: '' //上传接口
            , done: function (res) {
                console.log(res)
            }
        });


    });
</script>
</body>
</html>